<%@ page language="java" pageEncoding="utf8" %>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>闪动金管家</title>
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
    <link href="${ctx}/resource/wap/module/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="${ctx}/resource/wap/module/bootstrap/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="${ctx}/resource/wap/module/invate/css/style.css" rel="stylesheet">
    <!--JS-->
    <script src="${ctx}/resource/wap/module/bootstrap/js/jquery.min.js"></script>
    <script src="${ctx}/resource/wap/module/bootstrap/js/bootstrap.min.js"></script>
    <script src="${ctx}/resource/js/jquery.md5.js"></script>
</head>
<body>
<div class="all-bg">
    <div class="section">
        <div class="logo"><img src="${ctx}/resource/wap/module/invate/images/logo.png"></div>
        <div class="sp-i">
            <div class="sp-t">
                <h5><span>5%-10%</span>账单金额</h5>
                <h5>即可全额还款1万元</h5>
            </div>
        </div>
    </div>
    <div class="form">
        <input type="hidden" id="parentMerNo" name="parentMerNo" value="${parentMerNo}">
        <input type="hidden" id="oemType" name="oemType" value="${oemType}">
        <div class="tel">
            <img src="${ctx}/resource/wap/module/invate/images/icon4.png">
            <input type="text" placeholder="请输入商户名称" id="merchantName" name="merchantName" required/>
        </div>
        <div class="tel">
            <img src="${ctx}/resource/wap/module/invate/images/icon.png">
            <input type="text" placeholder="请输入您的手机号" id="mobileNo" name="mobileNo" required/>
        </div>
        <div class="yzm">
            <div class="pull-left yzm-l">
                <img src="${ctx}/resource/wap/module/invate/images/icon2.png">
                <input type="text" placeholder="请填写验证码" id="smsCode" name="smsCode" maxlength="6" required>
            </div>
            <div class="pull-right yzm-r">
                <input type="button" class="btn btn-default pull-right" value="获取验证码" id="verify-btn"/>
            </div>
        </div>
        <div class="tel">
            <img src="${ctx}/resource/wap/module/invate/images/icon3.png">
            <input type="password" placeholder="请输入您的登录密码" id="loginPwd" name="loginPwd" required/>
        </div>
        <div class="tel">
            <img src="${ctx}/resource/wap/module/invate/images/icon3.png">
            <input type="password" placeholder="请确认您的密码" id="confirmLoginPwd" name="confirmLoginPwd" required/>
        </div>
        <div class="sub">
            <input type="button" id="register-btn" value="免费注册">
        </div>
        <div class="sub">
            <input type="button" id="download-btn" style="background-color: #4abcef;" value="已注册，前往下载APP">
        </div>
    </div>
    <div class="section2 text-center"><span class="pull-left"></span>了解闪动金管家<span class="pull-right"></span></div>
    <div class="section3">
        <div class="ul-box text-center">
            <ul>
                <li><span class="sp1">·</span> <span class="sp2">更快捷</span></li>
                <li><span class="sp1">·</span> <span class="sp2">更智能</span></li>
                <li><span class="sp1">·</span> <span class="sp2">更优惠</span></li>
                <li><span class="sp1">·</span> <span class="sp2">更多元</span></li>
            </ul>
        </div>
        <div class="sp-i"></div>
    </div>
    <div class="section4">
        <ul>
            <li>
                <div class="li-l pull-left"><img src="${ctx}/resource/wap/module/invate/images/pic4.jpg"></div>
                <div class="li-c pull-left">
                    <h5>一键操作 智能还款</h5>
                    <h5>全自动完成账单还款</h5>
                </div>
                <div class="li-r pull-right"><img src="${ctx}/resource/wap/module/invate/images/pic5.jpg"></div>
            </li>
            <li>
                <div class="li-l pull-left"><img src="${ctx}/resource/wap/module/invate/images/pic6.jpg"></div>
                <div class="li-c pull-left">
                    <h5>完美还款自定义实体</h5>
                    <h5>落地商户，实现完美账单</h5>
                </div>
                <div class="li-r pull-right"><img src="${ctx}/resource/wap/module/invate/images/pic7.jpg"></div>
            </li>
            <li>
                <div class="li-l pull-left"><img src="${ctx}/resource/wap/module/invate/images/pic8.jpg"></div>
                <div class="li-c pull-left">
                    <h5>超低手续费，还款一万</h5>
                    <h5>手续费低至49元</h5>
                </div>
                <div class="li-r pull-right"><img src="${ctx}/resource/wap/module/invate/images/pic9.jpg"></div>
            </li>
            <li>
                <div class="li-l pull-left"><img src="${ctx}/resource/wap/module/invate/images/pic10.jpg"></div>
                <div class="li-c pull-left">
                    <h5>刷卡+还款+申请信用卡</h5>
                    <h5>零投资创业， 做金融达人</h5>
                </div>
                <div class="li-r pull-right"><img src="${ctx}/resource/wap/module/invate/images/pic11.jpg"></div>
            </li>
        </ul>
    </div>
</div>


<link rel="stylesheet" href="${ctx}/resource/wap/lib/css/weui.min.css">
<link rel="stylesheet" href="${ctx}/resource/wap/module/loading/css/animate.css">
<link rel="stylesheet" href="${ctx}/resource/wap/module/loading/css/style.css">
<style>
    * {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    input {
        -webkit-user-select: auto; /*webkit浏览器*/
    }

</style>

<div id="msgAlert" style="display:none;">
    <div class="weui-mask_transparent"></div>
    <div class="weui-toast" style="width: 10em;">
        <i class="weui-icon-warn" style="font-size: 45px;color: #fff;padding: 18px 0px 8px 0px;"></i>

        <p id="msg" class="weui-toast__content">警告</p>
    </div>
</div>

<div id="loadingMsgAlert" style="display:none;">
    <div class="weui-mask_transparent"></div>
    <div class="weui-toast">
        <i class="weui-loading weui-icon_toast"></i>

        <p id="loadingMsg" class="weui-toast__content">加载</p>
    </div>
</div>
<!--加载-->
<div id="bonfire-pageloader">
    <div class="bonfire-pageloader-icon">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512"
             xml:space="preserve"><path id="loading-12-icon"
                                        d="M291,82.219c0,16.568-13.432,30-30,30s-30-13.432-30-30s13.432-30,30-30S291,65.65,291,82.219zM261,404.781c-15.188,0-27.5,12.312-27.5,27.5s12.312,27.5,27.5,27.5s27.5-12.312,27.5-27.5S276.188,404.781,261,404.781zM361.504,113.167c-4.142,7.173-13.314,9.631-20.487,5.489c-7.173-4.141-9.631-13.313-5.49-20.487c4.142-7.173,13.314-9.631,20.488-5.489C363.188,96.821,365.645,105.994,361.504,113.167z M188.484,382.851c-14.348-8.284-32.697-3.368-40.98,10.98c-8.285,14.349-3.367,32.696,10.98,40.981c14.35,8.283,32.697,3.367,40.98-10.981C207.75,409.482,202.834,391.135,188.484,382.851z M421.33,184.888c-8.368,4.831-19.07,1.965-23.901-6.404c-4.832-8.368-1.965-19.07,6.404-23.902c8.368-4.831,19.069-1.964,23.9,6.405C432.566,169.354,429.699,180.056,421.33,184.888zM135.399,329.767c-8.285-14.35-26.633-19.266-40.982-10.982c-14.348,8.285-19.264,26.633-10.979,40.982c8.284,14.348,26.632,19.264,40.981,10.98C138.767,362.462,143.683,344.114,135.399,329.767z M436.031,277.249c-11.044,0-20-8.953-20-19.999c0-11.045,8.955-20.001,20.001-20.001c11.044,0,19.999,8.955,19.999,20.002C456.031,268.295,447.078,277.249,436.031,277.249z M115.97,257.251c-0.001-16.57-13.433-30.001-30.001-30.002c-16.568,0.001-29.999,13.432-30,30.002c0.001,16.566,13.433,29.998,30.001,30C102.538,287.249,115.969,273.817,115.97,257.251zM401.333,364.248c-10.759-6.212-14.446-19.97-8.234-30.73c6.212-10.759,19.971-14.446,30.731-8.233c10.759,6.211,14.445,19.971,8.232,30.73C425.852,366.774,412.094,370.46,401.333,364.248z M135.398,184.736c8.285-14.352,3.368-32.698-10.98-40.983c-14.349-8.283-32.695-3.367-40.981,10.982c-8.282,14.348-3.366,32.696,10.981,40.981C108.768,204,127.115,199.082,135.398,184.736z M326.869,421.328c-6.902-11.953-2.807-27.242,9.148-34.145s27.243-2.806,34.146,9.149c6.902,11.954,2.806,27.243-9.15,34.145C349.059,437.381,333.771,433.284,326.869,421.328zM188.482,131.649c14.352-8.286,19.266-26.633,10.982-40.982c-8.285-14.348-26.631-19.264-40.982-10.98c-14.346,8.285-19.264,26.633-10.98,40.982C155.787,135.017,174.137,139.932,188.482,131.649z"/></svg>
    </div>
</div>

<script src="${ctx}/resource/wap/module/loading/js/pageloader.js" type="text/javascript"></script>
<script>
    function loading() {
        $('.bonfire-pageloader-icon').removeClass("bonfire-pageloader-icon-hide");
        $('#bonfire-pageloader').removeClass("bonfire-pageloader-fade bonfire-pageloader-hide");
    }
</script>

<script>
    function alertMsg(msg) {
        $("#msg").html(msg);
        var $msgToast = $('#msgAlert');
        if ($msgToast.css('display') != 'none')
            return false;
        $msgToast.fadeIn(100);
        setTimeout(function () {
            $msgToast.fadeOut(100);
        }, 1000);
        return true;
    }

    function alertLoadingMsg(msg) {
        $("#loadingMsg").html(msg);
        var $msgToast = $('#loadingMsgAlert');
        if ($msgToast.css('display') != 'none')
            return false;
        $msgToast.fadeIn(100);
        setTimeout(function () {
            $msgToast.fadeOut(100);
        }, 1000);
        return true;
    }

</script>
</body>
<script type="text/javascript">
    var mobileNoReg = /(^1[3|4|5|6|7|8]\d{9}$)|(^09\d{8}$)/;//手机号正则
    var count = 60; //间隔函数，1秒执行
    var interVal; //timer变量，控制时间
    var curCount;//当前剩余秒数
    var signKey = '${signKey}';//签名参数

    $(function () {
        $('#verify-btn').click(function () {
            var mobileNo = $.trim($('#mobileNo').val());
            if (isNull(mobileNo)) {
                alertMsg("请输入手机号");
                return false;
            }
            if (!mobileNoReg.test(mobileNo)) {
                alertMsg("请输入有效的手机号");
                return false;
            }
            var signSrc = "busiType=MERCHANT_REG&mobileNo="+mobileNo+"&key="+signKey;
            var sign = $.md5(signSrc);
            $.ajax({
                url: '${ctx}/client/getSmsCode',
                type: 'POST',
                data: {"mobileNo": mobileNo, "busiType": "MERCHANT_REG", "sign": sign},
                dataType: 'json',
                cache: 'false',
                async: true,
                success: function (data) {
                    if (!isNull(data) && data.status == 200) {
                        sendMessage();
                        alertMsg("验证码已发送，注意查收");
                    } else {
                        alertMsg(data.msg);
                    }
                }
            });
        });

        $('#register-btn').click(function () {
            var merchantName = $.trim($('#merchantName').val());
            if (isNull(merchantName)) {
                alertMsg("请输入商户名称");
                return false;
            }

            var mobileNo = $.trim($('#mobileNo').val());
            if (isNull(mobileNo)) {
                alertMsg("请输入手机号");
                return false;
            }
            if (!mobileNoReg.test(mobileNo)) {
                alertMsg("请输入有效的手机号");
                return false;
            }
            var loginPwd = $.trim($('#loginPwd').val());
            if (isNull(loginPwd)) {
                alertMsg("请输入登录密码");
                return false;
            }
            var confirmLoginPwd = $.trim($('#confirmLoginPwd').val());
            if (isNull(confirmLoginPwd)) {
                alertMsg("请输入确认密码");
                return false;
            }
            if(loginPwd != confirmLoginPwd){
                alertMsg("两次密码输入不一致");
                return false;
            }
            var smsCode = $.trim($('#smsCode').val());
            if (isNull(smsCode)) {
                alertMsg("请输入短信验证码");
                return false;
            }
            var oemType = $.trim($('#oemType').val());
            var parentMerNo = $.trim($('#parentMerNo').val());
            //Md5添加签名
            var signSrc = "confirmLoginPwd="+confirmLoginPwd+"&loginPwd="+loginPwd+"&merchantName="+merchantName+"&mobileNo="+mobileNo+
                          "&oemType="+oemType+"&parentMerNo="+parentMerNo+"&smsCode="+smsCode+"&key="+signKey;
            var sign = $.md5(signSrc);

            alertLoadingMsg("提交中");
            setTimeout(function () {
                $.ajax({
                    url: '${ctx}/merMgr/merReg',
                    type: 'POST',
                    data: {
                        oemType: oemType,
                        merchantName: merchantName,
                        mobileNo: mobileNo,
                        loginPwd: loginPwd,
                        confirmLoginPwd: confirmLoginPwd,
                        smsCode: smsCode,
                        parentMerNo: parentMerNo,
                        sign: sign
                    },
                    dataType: 'json',
                    cache: 'false',
                    async: true,
                    success: function (data) {
                        if (!isNull(data) && data.status == 200) {
                            alertMsg('注册成功');
                            setTimeout(function () {
                                window.location.href = '${ctx}/resource/wap/module/apps/download.html';
                            }, 1000);
                        } else {
                            alertMsg(data.msg);
                        }
                    }
                });
            }, 1000);
        });
        $('#download-btn').click(function () {
            window.location.href = '${ctx}/resource/wap/module/apps/download.html';
        });
    });

    function sendMessage() {
        curCount = count;
        var mobileNo = $.trim($('#mobileNo').val());
        if (isNull(mobileNo)) {
            alert(" 请输入手机号码");
            return false;
        }
        if (!mobileNoReg.test(mobileNo)) {
            alert(" 请输入有效的手机号码");
            return false;
        }
        //设置button效果，开始计时
        $("#verify-btn").attr("disabled", "true");
        $("#verify-btn").val(+curCount + "秒再获取");
        interVal = window.setInterval(setRemainTime, 1000); //启动计时器，1秒执行一次
        //向后台发送处理数据

    }
    function setRemainTime() {
        if (curCount == 0) {
            window.clearInterval(interVal);//停止计时器
            $("#verify-btn").removeAttr("disabled");//启用按钮
            $("#verify-btn").val("重新发送");
        }
        else {
            curCount--;
            $("#verify-btn").val(+curCount + "秒再获取");
        }
    }
    function isNull(value) {
        if (!value || null == value || 'null' == value
                || value == '' || value == 'undefined'
                || typeof(value) == undefined
                || value.length == 0) {
            return true;
        }
        return false;
    }
</script>
</html>